<template>
	<view class="indexs">
		<view class="header header_wi" :style="'padding-top: ' + navH + 'px;'">
			<view class="header_height" :style="'height:' + gaodu + 'px;line-height:' + gaodu + 'px;top:' + gaodutops + 'px;'">
				<view class="index_h_cont3">
					<view class="index_wenben_img" @tap="jumpzuo"><image :src="imgUrl + '/dzx_img33.png'" mode="widthFix"></image></view>
					<view class="index_wenben">{{ $t('page_my_huikuan.remittance_account') }}</view>
				</view>
			</view>
			<view class="coloe_title">s</view>
		</view>
		<view class="index_center" :style="'padding-top:' + (navH + 50) + 'px;padding-bottom: 130rpx;'">
			<view class="my_huikuan_center">
				<view class="my_huikuan_item1">
					<view class="my_huikuan_item1_title">
						<image :src="imgUrl + '/dzx_img30.png'"></image>
						<text>{{ $t('page_my_huikuan.kind_tips') }}</text>
					</view>
					<view class="my_huikuan_item1_list">
						<view class="my_huikuan_item1_cont">
							<mp-html :content="setting" />
						</view>
					</view>
				</view>
				<view class="my_huikuan_item2">
					<view class="my_huikuan_item1_title">
						<image :src="imgUrl + '/dzx_img136.png'"></image>
						<text>{{ $t('page_my_huikuan.remittance_account') }}</text>
					</view>
					<view class="my_huikuan_item2_list">
						<view class="my_huikuan_item2_cont" v-for="(item, index) in arrlist" :key="index">
							<view class="my_huikuan_item2_cont_l">
								<view class="my_huikuan_item2_t1" v-if="item.bank_name">{{ $t('page_my_huikuan.bank_name') }}：{{ item['bank_name'] }}</view>
								<view class="my_huikuan_item2_t1" v-if="item.bank_card">{{ $t('page_my_huikuan.account') }}：{{ item['bank_card'] }}</view>
								<view class="my_huikuan_item2_t1" v-if="item.open_name">{{ $t('page_my_huikuan.account_holder') }}：{{ item['open_name'] }}</view>
								<view class="my_huikuan_item2_t1" v-if="item.child_bank_name">{{ $t('page_my_huikuan.account_opening_branch') }}：{{ item['child_bank_name'] }}</view>
							</view>
							<view
								class="my_huikuan_item2_cont_r"
								:data-card="
									$t('page_my_huikuan.bank_name') +
										item['bank_name'] +
										'，' +
										$t('page_my_huikuan.account') +
										'：' +
										item['bank_card'] +
										'，' +
										$t('page_my_huikuan.account_holder') +
										'：' +
										item['open_name'] +
										'，' +
										$t('page_my_huikuan.account_opening_branch') +
										'：' +
										item['child_bank_name']
								"
								@tap="bindCopy"
							>
								{{ $t('page_my_huikuan.one_click_copy') }}
							</view>
						</view>
					</view>
				</view>
				<view class="my_huikuan_item2">
					<view class="my_huikuan_item1_title">
						<image :src="imgUrl + '/dzx_img136.png'"></image>
						<text>{{ $t('page_my_huikuan.wechat_account') }}</text>
					</view>
					<view class="my_huikuan_item2_list">
						<swiper class="swiper paid_list_cont"
								:indicator-dots="indicatorDots"
								:vertical="vertical"
								:autoplay="autoplay"
								:duration="duration"
								:interval="interval"
								:indicator-color="color"
								:indicator-active-color="colors"
								:circular="circular">
						    <block>
						        <swiper-item v-for="(item, index) in wechatlist" :key="index">
						<view class="my_huikuan_item2_cont"  >
							<view class="my_huikuan_item2_cont_l">
								<view class="my_huikuan_item2_t1" v-if="item.open_name">{{ $t('page_my_huikuan.account_holder') }}：{{ item['open_name'] }}</view>
								<view class="my_huikuan_item2_t1">
									<image :data-url="item" @click="previewImagebank" style="width: 100px;height: 100px;" :src="item.image?item.image.file_path:''"></image>
								</view>
							</view>
							<view 
								class="my_huikuan_item2_cont_r"
								:data-card="
										$t('page_my_huikuan.account_holder') +
										'：' +
										item['open_name']
								"
								@tap="bindCopy"
							>
								{{ $t('page_my_huikuan.one_click_copy') }}
							</view>
						</view>
						</swiper-item>
						    </block>
						</swiper>
					</view>
				</view>
				<view class="my_huikuan_item3">
					<view class="baoguo_btns">
						<view class="baoguo_btns_posi">
							<view class="baoguo_btn" @tap="tiaozhuans">{{ $t('page_my_huikuan.upload_certificate') }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
// pages/shouye/shouye_zkc/shouye_zkc.js
const app = getApp();
let request = require('../../../utils/require');
export default {
	data() {
		return {
			navH: app.globalData.navHeight,
			gaodu: app.globalData.height,
			gaodutops: app.globalData.top,
			imgUrl: app.globalData.imgUrl,
			arrlist: [],
			wechatlist:[],
			wenben: '',
			setting:''
		};
	},
	/**
	 * 生命周期函数--监听页面加载
	 */ onLoad() {
		var that = this;
	},
	onShow() {
		var that = this;
		that.arrlist = [];
		that.wechatlist = [];
		this.getBankCardList();
		this.getWechatList();
	},
	/**
	 * 生命周期函数--监听页面初次渲染完成
	 */
	onReady: function() {},
	/**
	 * 生命周期函数--监听页面隐藏
	 */
	onHide: function() {},
	/**
	 * 生命周期函数--监听页面卸载
	 */
	onUnload: function() {},
	/**
	 * 页面相关事件处理函数--监听用户下拉动作
	 */
	onPullDownRefresh: function() {},
	/**
	 * 页面上拉触底事件的处理函数
	 */
	onReachBottom: function() {},
	/**
	 * 用户点击右上角分享
	 */
	onShareAppMessage: function() {},
	methods: {
		previewImagebank(e) {
		  var artimages = e.currentTarget.dataset.url.image.file_path
		  uni.previewImage({
		    current: 0,
		    urls: [artimages],
		  });
		},
		tiaozhuans(e) {
			uni.navigateTo({
				url: '/pages/mys/my_huikuan_pinzheng/my_huikuan_pinzheng'
			});
		},
		bindCopy(e) {
			var card = e.currentTarget.dataset.card;
			uni.setClipboardData({
				data: card,
				success: function(res) {
					uni.getClipboardData({
						success: function(res) {
							uni.showToast({
								title: '复制成功'
							});
						}
					});
				}
			});
		},

		//复制
		fuzhi: function(e) {
			var that = this;
			uni.setClipboardData({
				data: e.currentTarget.dataset.name,
				success: function(res) {
					uni.getClipboardData({
						success: function(res) {
							uni.showToast({
								title: '复制成功'
							});
						}
					});
				}
			});
		},
		getWechatList() {
			var that = this;
			var url = 'index.php?s=/api/page/bankCardImageList';
			var data = {};
			request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					if (that.page > res.data.data.last_page) {
						that.ispage = false
					} else {
						that.wechatlist = that.wechatlist.concat(res.data.data.data.data)
						var setting = res.data.data.setting
						setting = setting.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
						setting = setting.replace(/<video/gi, '<video style="width:100vh;height:80vh !important;" ');
						that.setting = setting;
					}
				}
			});
		},
		getBankCardList() {
			var that = this;
			var url = 'index.php?s=/api/page/bankCardList';
			var data = {};
			request.post(url + `&wxapp_id=` + uni.getStorageSync('web_id'), data).then(res => {
				if (res.data.code == 1) {
					if (that.page > res.data.data.last_page) {
						that.ispage = false
					} else {
						that.arrlist = that.arrlist.concat(res.data.data.data.data)
						var setting = res.data.data.setting
						setting = setting.replace(/<img/gi, '<img style="max-width:100%;height:auto;display:block" ');
						setting = setting.replace(/<video/gi, '<video style="width:100vh;height:80vh !important;" ');
						that.setting = setting;
						console.log(that.setting, '4444');
					}
				}
			});
		},
		jumpzuo() {
			uni.navigateBack();
		}
	}
};
</script>
<style>
@import './my_huikuan.css';
</style>
